<template>
  <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图 -->
      <el-card>
         <el-table :data="rightsList" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label='权限名称' prop="authName"></el-table-column>
            <el-table-column label='路径' prop="path"></el-table-column>
            <el-table-column label='权限等级' prop="level" align="center"> 
                <template slot-scope="scope">
                     <el-tag v-if="scope.row.level ==='0'">等级一</el-tag>
                     <el-tag v-if="scope.row.level ==='1'" type="success">等级二</el-tag>
                     <el-tag v-if="scope.row.level ==='2'" type="warning">等级三</el-tag>
                </template>
            </el-table-column>
                
      </el-table>   
      </el-card>
      </div>
</template>

<script>
export default {
  name: "Right",
  data() {
    return {
      rightsList: [],
    };
  },
  created() {
    // 生命周期函数
    // 获取所有的权限
    this.getRightList();
  },
  methods: {
    // 获取权限列表
    async getRightList() {
      const { data: res } = await this.$http.get("rights/list");
      if (res.meta.status !== 200) {
        return this.$message.error("获取权限列表失败");
      }
      // 如果权限列表获取成功,则将数据挂载在  rightsList:[] 中
      this.rightsList = res.data;
      console.log(res);
      this.$message.success("获取权限列表成功");
    },
  },
};
</script>

<style>
</style>